import arrow from '@/assets/free_arrow.png';
import b_arrow from '@/assets/free_barrow.png';
import icon1 from '@/assets/free_icon1.png';
import icon2 from '@/assets/free_icon2.png';
import icon3 from '@/assets/free_icon3.png';
import man from '@/assets/free_man.png';
import phone from '@/assets/free_phone.png';
import woman1 from '@/assets/free_woman.png';
import star from '@/assets/land_star.png';

import woman from '@/assets/home_swiper_bg1.png';
import topPrev from '@/assets/land_toplefticon.png';
import topNext from '@/assets/land_toprighticon.png';
import { formatNumber } from '@/utils';
import { Carousel, Col, Divider, Flex } from 'antd';
import { Helmet, useIntl } from 'umi';
import CommonItem from './CommonItem';
import './index.less';
const ActivityThree: React.FC = () => {
  const intl = useIntl();

  const trustList = ['Orlando Diggs', 'Mollie Hall', 'Lori Bryson'];
  const teamList = [1, 2, 3];
  const teamWordList = ['1', '2', '3', '4'];
  const tipList = [
    {
      word: (
        <div style={{ fontSize: 48 }}>
          {formatNumber(180000, false)}
          <span style={{ fontSize: 30 }}>+</span>
        </div>
      ),
      id: 1,
    },
    {
      word: (
        <div>
          <span style={{ fontSize: 20, fontWeight: 600 }}>
            {intl.formatMessage({ id: 'home.free.icon_lower' })}
          </span>
          <span style={{ fontSize: 40 }}>40</span>
          <span style={{ marginLeft: 5, fontSize: 30 }}>%</span>
        </div>
      ),
      id: 2,
    },
    {
      word: (
        <div style={{ fontSize: 48 }}>
          {formatNumber(50000, false)}
          <span style={{ fontSize: 30, marginLeft: 9 }}>+</span>
        </div>
      ),
      id: 3,
    },
    {
      word: (
        <div>
          <span style={{ fontSize: 40 }}>95</span>
          <span style={{ marginLeft: 5, fontSize: 30 }}>%</span>
        </div>
      ),
      id: 4,
    },
  ];
  const isEn = intl.locale == 'en-US';
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="way">
        <div className="exclusive_top" style={{ display: 'flex' }}>
          <div
            className="common"
            style={{
              display: 'flex',
              padding: '0 20px',
              alignItems: 'center',
              justifyContent: 'space-between',
              minHeight: 350,
              position: 'relative',
            }}
          >
            <div style={{ width: 670 }}>
              <div
                style={{
                  padding: '0 0 15px',
                  fontSize: isEn ? 40 : 50,
                  color: '#fff',
                  fontWeight: 600,
                }}
              >
                {intl.formatMessage({ id: 'home.index_word0' })}
              </div>
              <div
                style={{ fontSize: 30, color: '#fff', fontWeight: 600 }}
                className="exclusive_word"
              >
                {intl.formatMessage({ id: 'home.index_words0' })}
              </div>
            </div>
            <img
              style={{ position: 'absolute', bottom: 0, right: 130, zIndex: 2 }}
              height={325}
              width={325}
              src={woman}
            />
            <div
              style={{
                width: 163,
                height: 163,
                transform: 'rotate(40deg)',
                opacity: 0.5,
                position: 'absolute',
                background: '#C3DDFF',
                top: 117,
                right: 276,
                borderRadius: 16,
              }}
            />
            <div
              style={{
                width: 51,
                height: 51,
                transform: 'rotate(40deg)',

                position: 'absolute',
                background: '#C3DDFF',
                bottom: -9,
                right: 470,
                borderRadius: 8,
              }}
            />
            <div
              style={{
                width: 292,
                height: 300,
                transform: 'rotate(40deg)',

                position: 'absolute',
                background: '#C3DDFF',
                top: 117,
                right: 5,
                borderRadius: 16,
              }}
            />
            <div
              style={{
                width: 59,
                height: 59,
                transform: 'rotate(40deg)',

                position: 'absolute',
                background: '#C3DDFF',
                top: -6,
                right: 373,
                borderRadius: 8,
              }}
            />
          </div>
        </div>
        <div className="way_content">
          <div className="common">
            <div style={{ textAlign: 'center', padding: '80px 0' }}>
              <div style={{ fontSize: 32 }}>{intl.formatMessage({ id: 'home.free.title' })}</div>
              <div
                style={{
                  fontSize: isEn ? 20 : 24,
                  lineHeight: isEn ? '23px' : '33px',
                  margin: '16px 0 50px',
                }}
              >
                {intl.formatMessage({ id: 'home.free.word' })}
              </div>
              <div style={{ fontSize: 28, marginBottom: 10 }}>
                {intl.formatMessage({ id: 'home.free.mode_tilte' })}
              </div>
              <Flex align="center" justify="center">
                <div>
                  <Flex
                    align="end"
                    justify="center"
                    style={{ width: 160, borderRadius: '50%', height: 160, background: '#c3ddff' }}
                  >
                    <img style={{ width: '100%' }} src={woman1} />
                  </Flex>
                  <div style={{ fontSize: 16, marginTop: 18 }}>
                    {intl.formatMessage({ id: 'home.free.mode_word' })}
                  </div>
                </div>
                <div style={{ margin: '0 46px 0 26px' }}>
                  <div style={{ color: '#666' }}>
                    {intl.formatMessage({ id: 'home.free.mode_word1' })}
                  </div>
                  <img style={{ margin: '4px 0' }} src={arrow} width={200} />
                  <div style={{ color: '#666' }}>
                    {intl.formatMessage({ id: 'home.free.mode_word2' })}
                  </div>
                </div>
                <div>
                  <img width={80} height={80} src={icon1} />
                  <Flex gap={9}>
                    <img width={80} height={80} src={icon2} />
                    <img width={80} height={80} src={icon3} />
                  </Flex>
                  <div style={{ fontSize: 16, marginTop: 18 }}>
                    {intl.formatMessage({ id: 'home.free.mode_word3' })}
                  </div>
                </div>
              </Flex>
              <div
                style={{
                  fontSize: 24,
                  color: '#123ba4',
                  marginTop: 28,
                  width: 800,

                  margin: '60px auto',
                }}
              >
                {intl.formatMessage({ id: 'home.free.mode_word4' })}
              </div>
              <Divider
                style={{
                  width: 800,
                  minWidth: 'auto',
                  margin: '60px auto',
                  borderBlockStart: '2px dashed #999',
                }}
              />
              <div style={{ fontSize: 28 }}>
                {intl.formatMessage({ id: 'home.free.service_title' })}
              </div>
              <Flex
                style={{ margin: '16px 0 30px', padding: '0 80px' }}
                align="center"
                justify="space-between"
              >
                <div>
                  <Flex
                    align="end"
                    justify="center"
                    style={{ width: 140, borderRadius: '50%', height: 140, background: '#c3ddff' }}
                  >
                    <img style={{ width: 150 }} src={woman1} />
                  </Flex>
                  <div style={{ fontSize: 16, marginTop: 18 }}>
                    {intl.formatMessage({ id: 'home.free.mode_word' })}
                  </div>
                </div>
                <div style={{ marginTop: -45 }}>
                  <div style={{ color: '#2563eb', fontSize: 16, fontWeight: 'bold' }}>
                    {intl.formatMessage({ id: 'home.free.service_word' })}
                  </div>
                  <img style={{ marginTop: 3 }} src={b_arrow} width={164} />
                </div>
                <div>
                  <Flex
                    align="end"
                    justify="center"
                    style={{ width: 140, borderRadius: '50%', height: 140, background: '#bfbbc0' }}
                  >
                    <img style={{ width: '100%' }} src={man} />
                  </Flex>
                  <div style={{ fontSize: 16, marginTop: 18 }}>
                    {intl.formatMessage({ id: 'home.free.service_word1' })}
                  </div>
                </div>
                <div style={{ marginTop: -45 }}>
                  <div style={{ color: '#000', fontSize: 16 }}>
                    {intl.formatMessage({ id: 'home.free.service_word2' })}
                  </div>
                  <img style={{ marginTop: 3 }} src={b_arrow} width={130} />
                </div>
                <Flex gap={0} align="center">
                  <div>
                    <Flex
                      align="end"
                      justify="center"
                      style={{
                        width: 140,
                        borderRadius: '50%',
                        height: 140,
                        background: '#c3ddff',
                      }}
                    >
                      <img style={{ width: '100%' }} src={phone} />
                    </Flex>
                    <div style={{ fontSize: 16, marginTop: 18 }}>
                      {intl.formatMessage({ id: 'home.free.service_word3' })}
                    </div>
                  </div>
                  <div style={{ margin: '-20px 5px 0' }}>
                    <div className="way_line" style={{ width: 80, transform: 'rotate(-40deg)' }} />
                    <div className="way_line" style={{ margin: '40px 10px' }} />
                    <div className="way_line" style={{ width: 80, transform: 'rotate(40deg)' }} />
                  </div>
                  {isEn ? null : (
                    <div
                      style={{
                        color: '#034fe6',
                        lineHeight: '28px',
                        width: 30,
                        fontSize: 20,
                        fontWeight: 'bold',
                      }}
                    >
                      {intl.formatMessage({ id: 'home.free.service_word5' })}
                    </div>
                  )}
                  <Flex
                    gap={10}
                    align="center"
                    style={{ width: '60px', flexDirection: 'column', marginLeft: 11 }}
                  >
                    <img width={60} height={60} src={icon1} />
                    <img width={60} height={60} src={icon2} />
                    <img width={60} height={60} src={icon3} />
                    {!isEn ? null : (
                      <div
                        style={{
                          color: '#034fe6',
                          fontSize: 14,
                          fontWeight: 'bold',
                          whiteSpace: 'nowrap',
                        }}
                      >
                        {intl.formatMessage({ id: 'home.free.service_word5' })}
                      </div>
                    )}
                  </Flex>
                </Flex>
              </Flex>
              <div style={{ fontSize: 24, color: '#123ba4' }}>
                {intl.formatMessage({ id: 'home.free.service_word4' })}
              </div>
              {/* 团队 */}
              <div>
                <div style={{ fontSize: 32, margin: '80px 0 40px' }}>
                  {intl.formatMessage({ id: 'home.free.team_word' })}
                </div>
                <Carousel
                  nextArrow={<img src={topNext} />}
                  prevArrow={<img src={topPrev} />}
                  dots={false}
                  autoplaySpeed={6000}
                  className="way_trust_swiper"
                  arrows
                  slidesToShow={3}
                  infinite
                  style={{ marginBottom: 24 }}
                >
                  {teamList.map((item) => {
                    return (
                      <Col key={item} className="way_trust_items">
                        <Flex className="way_trust_item">
                          <Flex gap={11}>
                            <div style={{ fontSize: 18, flex: 1, textAlign: 'left' }}>
                              {intl.formatMessage({ id: 'home.free.load' })}
                            </div>
                            <Flex
                              align="center"
                              style={{ fontSize: 16, fontWeight: 'bold', flexDirection: 'column' }}
                            >
                              <img
                                width={50}
                                height={50}
                                src={require(`@/assets/m_icon${item}.png`)}
                              />

                              <div>Michael</div>
                              {intl.formatMessage({ id: 'home.free.team_word2' })}
                            </Flex>
                          </Flex>
                        </Flex>
                      </Col>
                    );
                  })}
                </Carousel>
                <Flex justify="space-between">
                  {teamWordList.map((item) => {
                    return (
                      <Flex gap={12} key={item} align="center">
                        <img
                          width={30}
                          height={30}
                          src={require(`@/assets/team_icon${item}.png`)}
                        />
                        <div style={{ fontSize: isEn ? 14 : 22, fontWeight: 700 }}>
                          {intl.formatMessage({ id: `home.free.service_step${item}` })}
                        </div>
                      </Flex>
                    );
                  })}
                </Flex>
                <Flex style={{ margin: '80px 0 0' }} justify="space-between">
                  {tipList.map((item) => {
                    const { word, id } = item;
                    const val = id < 3 ? 48 : 40;
                    return (
                      <Flex align="center" key={id} style={{ flexDirection: 'column' }}>
                        <div>
                          <Flex
                            justify="center"
                            align="center"
                            style={{
                              width: 97,
                              height: 97,
                              borderRadius: '50%',
                              background: '#c3ddff',
                              margin: '0 auto',
                            }}
                          >
                            <img
                              width={val}
                              height={val}
                              src={require(`@/assets/team_icon${id}.svg`)}
                            />
                          </Flex>
                          <div style={{ color: '#123ba4', margin: '18px 0 15px' }}>{word}</div>
                        </div>
                        <Flex
                          align="flex-end"
                          style={{ fontSize: 18, flex: 1, fontWeight: 'bold' }}
                        >
                          {intl.formatMessage({ id: `home.free.icon_word${id}` })}
                        </Flex>
                      </Flex>
                    );
                  })}
                </Flex>
              </div>
            </div>
          </div>
          <CommonItem />
          <div className="common" style={{ paddingBottom: 120 }}>
            <div
              style={{
                margin: '112px 0 40px',
                fontSize: 34,
                textAlign: 'center',
                fontWeight: 'bold',
              }}
            >
              {intl.formatMessage({ id: 'home.free.from' })}
            </div>
            <Carousel
              nextArrow={<img src={topNext} />}
              prevArrow={<img src={topPrev} />}
              dots={false}
              autoplaySpeed={6000}
              className="land_trust_swiper"
              arrows
              slidesToShow={3}
              infinite
              style={{ marginBottom: 30 }}
            >
              {trustList.map((item, index) => {
                return (
                  <Col key={item} className="land_trust_items">
                    <Flex className="land_trust_item">
                      <Flex gap={4}>
                        {new Array(5).fill(0).map((_, index) => {
                          // eslint-disable-next-line react/no-array-index-key
                          return <img width={24} height={24} src={star} key={index} />;
                        })}
                      </Flex>
                      <Flex style={{ margin: 'auto 0', lineHeight: '28px', fontSize: 18 }}>
                        <div>{intl.formatMessage({ id: `home.land_trust_word${index}` })}</div>
                      </Flex>
                      <Flex gap={16} align="center">
                        <img
                          width={48}
                          height={48}
                          src={require(`@/assets/land_user${index}.png`)}
                        />
                        <div style={{ fontWeight: 600, fontSize: 16 }}>{item}</div>
                      </Flex>
                    </Flex>
                  </Col>
                );
              })}
            </Carousel>
          </div>
        </div>
      </div>
    </>
  );
};
export default ActivityThree;
